<template>
	<view class="wrap">
		<view class="header">
			<map class="map" :latitude="location.latitude" :longitude="location.longitude" :markers="covers">
				<cover-view class="cancel btn" @click="onCancel">取消</cover-view>
				<cover-view class="confirm btn" @click="onConfirm">确定</cover-view>
			</map>
		</view>
		<view class="content">
			<view class="search">
				<u-search v-model="clientName" shape="square" actionText="搜索" placeholder="搜索地址" :animation="true" @custom="searchName" @search="searchName" @change="changeName"></u-search>
			</view>
			<view class="selectView" v-if='addressList.length'>
				<view class="selectInput" :class="currentIndex == index ? 'active' : ''" v-for="(item, index) in addressList" :key="index" @click="selectLocation(item, index)">
					<view class="name">{{item.name}}</view>
					<view class="address">{{item.district+item.address}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {type} from '@/utils/type.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				type: null,
				id:0, // 使用 marker点击事件 需要填写id
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '@/static/icon_location.png'
				}],
				
				clientName: '',
				addressList: [],
				location: {
					latitude: 39.909,
					longitude: 116.39742,
				},
				currentIndex: null,
				selectAddress: ''
			}
		},
		onLoad(options) {
			this.type = options.type
			let address = options.address
			uni.request({
				url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
				method: 'GET',
				data: {
					key: type.mapKey,
					address
				},
				success: res => {
					this.location.latitude = res.data.geocodes[0].location.split(',')[1]
					this.location.longitude = res.data.geocodes[0].location.split(',')[0]
					this.covers[0].latitude = this.location.latitude
					this.covers[0].longitude = this.location.longitude
				}
			})
		},
		methods: {
			searchName(e) {
				this.clientName = uni.$u.trim(e)
				if(!this.clientName) return
				this.getLocationList(this.clientName);
			},
			getLocationList(keywords) {
				let data = {
					keywords: keywords,
					location: `${this.location.longitude},${this.location.latitude}`,
					key: type.mapKey
				};
				uni.request({
					url: 'https://restapi.amap.com/v3/assistant/inputtips?parameters',
					method: 'GET',
					data: data,
					success: res => {
						this.addressList = res.data.tips.filter((item) => {
							return item.location
						});
					}
				})
			},
			selectLocation(item, index){
				console.log(item);
				this.currentIndex = index
				// this.clientName = item.name;
				// this.selectAddress = `${item.name}${item.address}`
				this.selectAddress = `${item.name}`
				if(item.location.length){
					this.location.latitude = item.location.split(',')[1]
					this.location.longitude = item.location.split(',')[0]
				}
				this.covers[0].latitude = this.location.latitude
				this.covers[0].longitude = this.location.longitude
			},
			changeName(val) {
				uni.$u.debounce(this.debounceChangeName(val), 1000)
			},
			debounceChangeName(val){
				let address = val
				this.selectAddress = val
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
					method: 'GET',
					data: {
						key: type.mapKey,
						address
					},
					success: res => {
						console.log(res.data)
						if(res.data){
							this.location.latitude = res.data.geocodes[0].location.split(',')[1]
							this.location.longitude = res.data.geocodes[0].location.split(',')[0]
							this.covers[0].latitude = this.location.latitude
							this.covers[0].longitude = this.location.longitude
						}
					}
				})
			},
			onCancel() {
				uni.navigateBack()
			},
			onConfirm() {
				console.log(this.selectAddress)
				if(!this.selectAddress){
					uni.$u.toast('请搜索并选择详细地址');
					return
				}
				let options = {
					address: this.selectAddress,
					latitude: this.location.latitude,
					longitude: this.location.longitude
				}
				console.log(options)
				if(this.type == 1){
					this.SAVEDETAIL01(options)
				}else{
					this.SAVEDETAIL02(options)
				}
				uni.navigateBack()
			},
			...mapMutations(['SAVEDETAIL01', 'SAVEDETAIL02'])
		},
		computed: {
			...mapGetters(['saveDetail01', 'saveDetail02'])
		},
	}
</script>

<style lang="scss">
	.wrap{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 50vh 0 0;
	}
	.content{
		box-sizing: border-box;
		border-top: 1rpx solid #FAFAFA;
		width: 100%;
		height: 100%;
		padding: 100rpx 24rpx env(safe-area-inset-bottom);
		position: relative;
		.search{
			width: 100vw;
			position: absolute;
			top: 24rpx;
			left: 0;
			padding: 0 24rpx;
			box-sizing: border-box;
		}
		.selectView{
			box-sizing:  border-box;
			overflow: auto;
			width: 100%;
			height: 100%;
		}
		.selectInput{
			height:100rpx;
			background: #ffffff;
			border-bottom: 1rpx solid #F5F7FB;
			box-sizing: border-box;
			padding: 0 12rpx;
			&.active{
				background: #eaf9f2;
			}
			&:last-child{
				border-bottom: none
			}
		}
		.name{
			color:#000000;
			font-size: 32rpx;
			padding-top: 8rpx;
		}
		.address{
			color:#6c6c6c;
			font-size: 24rpx;
			display: block;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
	}
	.header{
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background: #fff;
		width: 100vw;
		height: 50vh;
		.btn{
			box-sizing: border-box;
			position: absolute;
			z-index: 100;
			top: 90rpx;
			width: 120rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 28rpx;
			line-height: 48rpx;
			text-align: center;
			&.cancel{
				background: rgba(244, 244, 244, .6);
				color: #333;
				left: 24rpx;
			}
			&.confirm{
				background: rgba(6, 191, 97, .8);
				color: #fff;
				right: 24rpx;
			}
		}
		.map{
			position: absolute;
			z-index: 90;
			top: 0;
			left: 0;
			width: 100vw;
			height: 50vh;
		}
	}
</style>